<script>
import { loginAPI, getUserInfoAPI } from '@/apis/sys'
import { useUserStore } from '@/stores/user'

export default {
  name: 'LoginIndex',
  data() {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      // 表单验证
      if (!this.loginForm.account || !this.loginForm.password) {
        alert('请输入账号和密码')
        return
      }

      this.loading = true
      try {
        // 调用登录接口
        const res = await loginAPI(this.loginForm)
        console.log('登录接口返回:', res);

        // 添加对res是否存在以及是否有code属性的检查
        if (res && res.code === 0) {
          // 登录成功，获取用户ID
          const userId = res.data && res.data.userId;
          console.log('当前登录用户ID:', userId);

          // 检查userId是否存在
          if (!userId) {
            throw new Error('用户ID不存在');
          }

          // 通过用户ID获取用户完整信息（包括基本信息、权限列表和角色列表）
          const userInfoRes = await getUserInfoAPI(userId);
          console.log('用户信息接口返回:', userInfoRes);
          
          // 添加对userInfoRes是否存在以及是否有code属性的检查
          if (userInfoRes && userInfoRes.code !== 0) {
            throw new Error(userInfoRes.msg || '获取用户信息失败');
          }
          
          // 检查userInfoRes.data是否存在
          if (!userInfoRes || !userInfoRes.data) {
            throw new Error('获取用户信息失败');
          }
          
          // 检查用户是否分配了角色
          const userRoles = userInfoRes.data.roles;
          if (!userRoles || userRoles.length === 0) {
            alert('该用户未分配角色，不能登录');
            this.loading = false;
            return;
          }
          
          // 保存用户信息到store
          const userStore = useUserStore()
          userStore.setUserInfo(userInfoRes.data)
          
          // 跳转到管理员主页
          this.$router.push('/admin')
        } else {
          // 登录失败，显示错误信息
          alert(res && res.msg || '登录失败')
        }
      } catch (error) {
        // 网络或其他异常
        console.error('登录失败:', error)
        alert('登录失败: ' + (error.msg || error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <h2>用户登录</h2>
      </div>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-item">
          <label for="account">账号:</label>
          <input
            id="account"
            v-model="loginForm.account"
            type="text"
            placeholder="请输入账号"
            required
          />
        </div>
        <div class="form-item">
          <label for="password">密码:</label>
          <input
            id="password"
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            required
          />
        </div>
        <button type="submit" class="login-button" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-box {
  width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  font-size: 24px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.form-item input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-item input:focus {
  outline: none;
  border-color: #409eff;
}

.login-button {
  padding: 12px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #66b1ff;
}

.login-button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
</style>
